<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>产品信息</title>
	<!--引入layui的css  -->
</head>
<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="../lib/layui-v2.6.3/layui.js"></script>
<link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css">
<script src="../js/global.js"></script>
<body>

<!--定义数据表格table  -->
<table class="layui-hide" id="proTable" lay-filter="filterTable"></table>

<!-- 开关1（既能开也能关） -->
<script type="text/html" id="switchBar1">
	<input type="checkbox" data-id="{{d.id}}" name="isLockout" lay-filter="isLockSwitch" lay-skin="switch"
		   lay-text="自动分配开启|自动分配关闭" {{d.isLock=="1" ? "checked":""}}>
</script>



<script>
	layui.use(['laydate', 'layer', 'form', 'table', 'tree', 'upload', 'transfer'], function() {
		var laydate = layui.laydate //日期组件
				,
				layer = layui.layer //弹层组件
				,
				form = layui.form //表单组件
				,
				upload = layui.upload //上传组件
				,
				tree = layui.tree //树形结构组件
				,
				$ = layui.jquery //jQuery
				,
				table = layui.table //表格组件
				,
				transfer = layui.transfer; //穿梭框组件


		//渲染表格，填充数据
		table.render({
			elem: '#proTable', //对应上面定义的表格ID
			url: globalData.server + 'allocation/find', //提交到后台的地址
			headers: {
				token: globalData.token
			},
			method: 'get', //提交方式 get或者post
			even: false, //表格隔行变色
			page: false, //开启分页
			toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
			title: '产品表', //表格名称
			cols: [
				[{
					field: 'isLock',
					title: '分量开关',
					align:"center",
					toolbar: '#switchBar1'
				}]
			],

		});

		// 处理开关点击时把信息传入到后台进行修改（isLockSwitch写对应开关的lay-filter值即可）
		form.on('switch(isLockSwitch)', function(data) {
			var id = $(this).attr('data-id'); //获得当前点击对象的id值
			var valid = this.checked ? 'on' : 'off'; //获取到点击后的开关状态（on/off）
			var x = data.elem.checked; //获取到点击后的开关状态（true/false）
			layer.open({
				content: '确定要修改状态吗？' //给用户的友好提示
				,
				btn: ['确定', '取消'],
				yes: function(index, layero) {
					data.elem.checked = x;
					layer.close(index);
					$.ajax({
						type: "POST",
						url: globalData.server + 'allocation/set',
						data: {
							"valid": valid,
							token: globalData.token
						},
						success: function(res) {
							if (res) {
								layer.msg("修改成功！");
							} else {
								layer.msg("修改失败！");
							}
							form.render();
						},
						error: function() {}
					});
				},
				btn2: function(index, layero) {
					//按钮【按钮二】的回调
					data.elem.checked = !x;
					form.render();
					layer.close(index);
					//return false 开启该代码可禁止点击该按钮关闭
				},
				cancel: function() {
					//右上角关闭回调
					data.elem.checked = !x;
					form.render();
					//return false 开启该代码可禁止点击该按钮关闭
				}
			});
			form.render();
			return false;
		});
	});
</script>
</body>
</html>
